<!DOCTYPE html>
<html>
<head>
    <title>Snake</title>
</head>
<body>
<canvas id="canvas" width="600" height="600">
    Your browser not support Canvas!
</canvas>

<script type="text/javascript">
    var c = document.getElementById('canvas');
    var ctx = c.getContext('2d');
//    ctx.translate(100,100);
    var canvasWidth;
    var canvasHeight;
    //snake array
    var snakeArray;
    //snake unit width
    var px;
    //fps
    var cycle;
    //setInterval
    var gameLoop;
    //key
    var left = 37;
    var up = 38;
    var right = 39;
    var down = 40;
    //direction
    var d;
    //food
    var f;
    //score
    var score;
    //too fast become direction
    var flagD;

    init();
    //init snake
    function init(){
        canvasWidth = c.width;
        canvasHeight = c.height;
        snakeArray = [];
        px = 20;
        cycle = 500/1000;
        d = right;
        f = {x:-1,y:-1};
        score = 0;
        flagD =  true;

        if(typeof gameLoop != 'undefined'){
            clearInterval(gameLoop);
        }

        initSnake(3);
        initFood();
        play();
    }

    function play(){
        gameLoop = setInterval(function(){

            ctx.fillStyle = 'white';
            ctx.fillRect(0,0,canvasWidth,canvasHeight);
            ctx.strokeStyle = 'black';
            ctx.strokeRect(0,0,canvasWidth,canvasHeight);

            moveSnake();
            //paintFood();
            paintSnake(snakeArray);
            ctx.fillStyle = 'red';
            paintCell(f.x,f.y);
            var scoreStr = 'Score:' + score;
            ctx.fillText(scoreStr,5,canvasHeight - 5);
        },cycle*1000);
    }

    //init snake
    function initSnake(length){
        for(var i=length;i>0;i--){
            snakeArray.push({x:i,y:0});
        }
    };

    //    paintSnake();
    function paintSnake(){
        ctx.fillStyle = 'blue';
        for(var i=0;i<snakeArray.length;i++){
            paintCell(snakeArray[i].x,snakeArray[i].y);
        }
    }

    //paint cell
    function paintCell(x,y){
        ctx.fillRect(x*px,y*px,px-1,px-1);
    }

    // move snake
    function moveSnake(){
        flagD = false;
//        console.log("move direction:" + d);
//        for(var tt in snakeArray){
//
//            console.log(tt+":"+snakeArray[tt].x+","+snakeArray[tt].y);
//        };
        //control direction
        var p = {x:snakeArray[0].x,y:snakeArray[0].y};
        if(d == left) p.x--;
        else if(d == right) p.x++;
        else if(d == up) p.y--;
        else if(d == down) p.y++;
        //eat food
        if(p.x == f.x && p.y == f.y){
            score++;
            initFood();
        }else{
            snakeArray.pop();
        }

        //
        if(p.x == -1 || p.x == canvasWidth/px || p.y == -1 || p.y == canvasHeight/px
                || checkColliction(p.x,p.y)){
            alert(p.x + ":" + p.y);
            init();
            return;
        }
        snakeArray.unshift(p);
        flagD = true;
    }
    // check collection
    function checkColliction(x,y){

        for(var t in snakeArray){
            if(x == snakeArray[t].x && y == snakeArray[t].y)
            {
//                console.log('collection');
//                for(var tt in snakeArray){
//
//                    console.log(tt+":"+snakeArray[tt].x+","+snakeArray[tt].y);
//                }
                return true;
            }
        }
        return false;
    }
    //
    function initFood(){
        var flag = false;
        do{
            f.x = Math.floor(canvasWidth/px*Math.random());
            f.y = Math.floor(canvasHeight/px*Math.random());
            for(var t in snakeArray){
                if(f.x == snakeArray[t].x && f.y == snakeArray[t].y)
                    flag = true;
            }
        }while(flag);

    }
    //add listin key
    window.addEventListener('keydown',function(e){
        if(flagD){
            if(e.keyCode == left && d != right) d = left;
            else if(e.keyCode == right && d != left) d = right;
            else if(e.keyCode == up && d!= down) d = up;
            else if(e.keyCode == down && d != up) d = down;
            flagD = false;
        };

    });
</script>
</body>
</html>